<template>
  <ListWrap>
    <template slot="search">
      <el-form size="mini" :model="searchForm" :inline="true">
        <el-form-item size="mini" label="比赛日期">
          <el-date-picker
            v-model="searchForm.times"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:23:23']"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </template>
    <template slot="control-left">
      <el-button
        size="mini"
        type="primary"
        :loading="loading"
        @click="handleSearch"
        >查询</el-button
      >
      <el-button size="mini" :loading="loading" @click="handleResetSearch"
        >重置</el-button
      ></template
    >
    <template slot="control-right">
      <el-button
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="handleJumpToAdd"
        >新增比赛</el-button
      ></template
    >
    <template slot="list"
      ><div class="race-list-container">
        <el-table
          style="width: 100%"
          v-loading="loading"
          :data="listData"
          border
          height="100%"
        >
          <el-table-column label="ID" prop="id" minWidth="100" />
          <el-table-column prop="times" label="比赛时间" minWidth="360">
            <template slot-scope="scope">
              <span>{{ formatTime(scope.row) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="otherTeamName"
            label="比赛队伍"
            minWidth="100"
          />
          <el-table-column prop="age" label="结果" minWidth="100">
            <template slot-scope="scope">
              <span v-if="showResult(scope.row)"
                ><span style="margin-right: 5px"
                  >{{ scope.row.myTeamScore }}:{{
                    scope.row.otherTeamScore
                  }}</span
                >
                <el-tag
                  v-if="scope.row.myTeamScore > scope.row.otherTeamScore"
                  type="success"
                  >胜利</el-tag
                >
                <el-tag
                  v-if="scope.row.myTeamScore < scope.row.otherTeamScore"
                  type="danger"
                  >失败</el-tag
                >
                <el-tag
                  v-if="scope.row.myTeamScore === scope.row.otherTeamScore"
                  >平局</el-tag
                ></span
              >

              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="foulTotalNumber"
            label="犯规次数"
            minWidth="80"
          />
          <el-table-column
            prop="position"
            fixed="right"
            label="操作"
            minWidth="100"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="handleJumpToDetail(scope.row)"
                >详情</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click="handleJumpToEdit(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div></template
    >
    <template slot="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageSize"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination>
    </template>
  </ListWrap>
</template>

<script>
import ListWrap from "@/components/ListWrap";
import { fetchRaceListData } from "@/api/race/index";
import moment from "moment";
export default {
  name: "race-list",
  components: { ListWrap },
  data() {
    return {
      loading: false,
      searchForm: {
        times: [],
      },
      listData: [],
      pageInfo: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.requestRaceListData();
  },
  methods: {
    /**
     * 查询
     */
    handleSearch() {
      this.pageInfo.pageNum = 1;
      this.requestRaceListData();
    },
    /**
     * 重置查询
     */
    handleResetSearch() {
      this.searchForm = this.$options.data().searchForm;
      this.pageInfo = this.$options.data().pageInfo;
      this.requestRaceListData();
    },
    /**
     * 分页
     */
    handleSizeChange(pageSize) {
      this.pageInfo.pageNum = 1;
      this.pageInfo.pageSize = pageSize;
      this.requestRaceListData();
    },
    /**
     * 分页
     */
    handleCurrentChange(pageNum) {
      this.pageInfo.pageNum = pageNum;
      this.requestRaceListData();
    },
    /**
     * 跳转至新增
     */
    handleJumpToAdd() {
      const query = {
        type: "add",
      };
      console.log("跳转至新增", query);
      this.$router.push({ name: "race-add", query });
    },
    /**
     * 跳转至详情
     */
    handleJumpToDetail(row) {
      if (!row?.id) {
        this.$message.warning("数据不完整，请先刷新页面！");
        return false;
      }
      this.$router.push({ name: "race-detail", query: { id: row?.id } });
    },
    /**
     * 跳转至编辑
     */
    handleJumpToEdit(row) {
      if (!row?.id) {
        this.$message.warning("数据不完整，请先刷新页面！");
        return false;
      }
      const query = {
        id: row?.id,
        type: "edit",
      };
      console.log("跳转至编辑", query);
      this.$router.push({ name: "race-edit", query });
    },
    /**
     * 格式化时间
     */
    formatTime(row) {
      if (row?.startTime && row?.endTime) {
        return `${moment(row?.startTime).format(
          "YYYY-MM-DD HH:mm:ss"
        )} ~ ${moment(row?.endTime).format("YYYY-MM-DD HH:mm:ss")}`;
      } else {
        return "-";
      }
    },
    showResult(row) {
      return (
        (row.myTeamScore ?? "") !== "" && (row.otherTeamScore ?? "") !== ""
      );
    },
    /**
     * 请求比赛列表数据
     */
    requestRaceListData() {
      this.loading = true;
      const params = {
        startTime:
          this.searchForm?.times &&
          Array.isArray(this.searchForm?.times) &&
          this.searchForm?.times?.length > 0
            ? moment(this.searchForm?.times[0]).valueOf()
            : null,
        endTime:
          this.searchForm?.times &&
          Array.isArray(this.searchForm?.times) &&
          this.searchForm?.times?.length > 0
            ? moment(this.searchForm?.times[1]).valueOf()
            : null,
        pageSize: this.pageInfo.pageSize,
        pageNum: this.pageInfo.pageNum,
      };
      fetchRaceListData(params)
        .then((res) => {
          this.listData = res?.data?.items || [];
          this.pageInfo.total = res?.data?.total || 0;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.listData = [];
          this.pageInfo.total = 0;
          this.loading = false;
        });
    },
  },
};
</script>

<style sopced>
.custom-search-input {
  width: 180px;
}
.race-list-container {
  width: 100%;
  height: 100%;
}
</style>
